{% extends "base.html" %}
{% block login_style %}
<style>
    .login-layout {
        min-height: 100vh;
        background-color: #f0f2f5;
    }

    .login-card {
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
    }

    .app-bar {
        background: linear-gradient(to right, #43A047, #66BB6A) !important;
    }

    .theme-toggle {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 10;
    }
</style>
{% endblock %}

{% block specify_title %} 登录 | 信息管理系统 {% endblock %}

{% block drawer %}{% endblock %}

{% block main %}

<v-card class="login-card pa-8" elevation="8" rounded="lg">
    <!-- 标题 -->
    <div class="text-center mb-6">
        <h2 class="text-h5 font-weight-bold">欢迎登录</h2>
        <p class="text--secondary mt-2">请输入您的账户信息以继续</p>
    </div>

    <!-- 登录表单（使用原生 form 提交，不依赖 JS） -->
    <form method="post" action="/login/">
        {% csrf_token %}

        <!-- 错误提示（Django 渲染） -->
        {% if form.non_field_errors %}
        <v-alert type="error" density="compact" class="mb-6">
            {{ form.non_field_errors }}
        </v-alert>
        {% endif %}

        <!-- 用户名 -->
        <v-text-field name="username" label="用户名" placeholder="请输入用户名" variant="outlined" prepend-icon="mdi-account"
            clearable class="mb-4" required></v-text-field>

        <!-- 密码 -->
        <v-text-field name="password" label="密码" placeholder="请输入密码" variant="outlined" prepend-icon="mdi-lock"
            type="password" clearable class="mb-6" required></v-text-field>

        <!-- 记住我 -->
        <v-checkbox name="remember" label="记住我" color="primary" hide-details class="mt-2"></v-checkbox>

        <!-- 登录按钮（原生 submit） -->
        <v-btn type="submit" color="primary" block size="large" class="mt-6" min-height="48">
            登录
        </v-btn>
    </form>

    <!-- 页脚 -->
    <div class="text-center mt-8 text--secondary">
        <small>&copy; 2025 信息管理系统. 保留所有权利.</small>
    </div>
</v-card>

{% endblock %}


{% block methods %}

{% endblock %}


{% block mounted %}

{% endblock %}